<template>
  <div>
    <el-table
      :data="data"
      :stripe="stripe"
      :border="border"
      :default-sort="defaultSort"
      style="width: 100%;margin-bottom:30px;">
      <template v-for="col in columns">
        <!-- slot为true时，使用插槽 -->
        <el-table-column
          v-if="col.slot"
          header-align="center"
          :align="col.align ? col.align : 'center'"
          :label="col.label" 
          :width="col.width"
        >
          <template slot-scope="scope">
             <slot
                :name="col.name"
                :row="scope.row"
                :index="scope.$index"
              >
              </slot>
          </template>
        </el-table-column>
        <el-table-column
          v-else
          :type="col.type"
          :index="col.index"
          :prop="col.prop"
          :label="col.label"
          :align="col.align ? col.align : 'center'"
          :width="col.width"
          :filters="col?.filters"
          :filter-method="col?.filterMethod"
          :sortable="col.sortable ? col.sortable : false"
          :show-overflow-tooltip="col.showOverflowTooltip ? col.showOverflowTooltip : false"
        >
        </el-table-column>
      </template>
    </el-table>

    <div :style="paginationStyle" v-if="showPagination">
      <el-pagination
        v-for="item in layouts"
        :key="item"
        :background="background"
        :layout="item"
        :total="total"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name:"customTable",
  data() {
    return {
      
    }
  },
  methods: {
    // 每页显示多少条改变事件
    handleSizeChange(val) {
      this.$emit('handleSizeChange', val)
    },
    // 当前页发生改变事件
    handleCurrentChange(val) {
      this.$emit('handleCurrentChange', val)
    },
  },
  props:{
    data:{
      type:Array,
      default:[]
    },
    stripe:{
      type:Boolean,
      default:false
    },
    border:{
      type:Boolean,
      default:false
    },
    columns:{
      type:Array,
      default:function(){
        return []
      } 
    },
    background:{
      type:Boolean,
      default:false
    },
    currentPage:{
      type:Number,
      default:1
    },
    pageSize:{
      type:Number,
      default:5
    },
    pageSizes:{
      type:Array,
      default:function(){
        return [5]
      }
    },
    total:{
      type:Number,
      default:0
    },
    showPagination:{
      type:Boolean,
      default:true
    },
    layouts:{
      type:Array,
      default:function(){
        return ['total, sizes, prev, pager, next, jumper']
      } 
    },
    paginationStyle:{
      type:String,
    },
    defaultSort:{
      type:Object,
      default:function(){
        return {}
      }
    },
    /* {
      type: "", // 序号用
      prop:"" // 列值
      label: "", // 列名
      width: "4%",
      align: "center",
      slot:false // 是否使用插槽

    }*/
    

  }
}
</script>

<style lang='less' scoped>
  
</style>